<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-03-22 13:37:08
 * @LastEditTime: 2023-06-29 17:24:27
-->
<script setup lang="ts" name="IkCollapseCard">
defineProps({
  showToggle: {
    type: Boolean,
    default: true
  }
})

const hidden = defineModel({
  type: Boolean,
  default: false
})

const handToogle = () => {
  hidden.value = !hidden.value
}
</script>

<template>
  <el-card
    class="ik-collapse-box-card"
    :class="hidden ? 'hiddened' : ''"
    shadow="hover"
  >
    <template #header>
      <div class="flex justify-between align-center">
        <!-- card header左侧内容 -->
        <slot name="header-leaft"></slot>
        <div class="flex align-center">
          <!-- card header右侧内容 -->
          <slot name="header-right"></slot>
          <!-- 展开、收起按钮 -->
          <el-button
            v-if="showToggle"
            link
            class="ml-[8px]"
            @click="handToogle()"
          >
            {{ hidden ? '展开' : '收起' }}
            <IkSvgIcon name="iksvg_shouqi2" :class="hidden ? 'toogle' : null" />
          </el-button>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

<style lang="scss" scoped>
.ik-collapse-box-card {
  flex: 1;
  margin-bottom: 20px;
  --el-card-border-radius: 0;

  :deep(.el-card__header) {
    border-bottom: none;
    color: var(--el-text-color-regular);
    background-color: var(--el-bg-color-page);
    padding-right: 0;
  }

  :deep(.ik-iksvg_shouqi2){
     transition: all .25s;

     &.toogle{
      transform: rotate(-90deg);
     }
  }

  &.hiddened {
    :deep(.el-card__body) {
      // height: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      grid-template-rows: 0fr;
      opacity: 0;
      overflow: hidden;
    }
  }

  :deep(.el-card__body) {
    padding: 0;
    opacity: 1;
    grid-template-rows: 1fr;
    display: grid;
    transition: all 0.25s ease;
    overflow: hidden !important;

    table > tbody > tr > td > .cell {
      .cell-icon {
        font-size: 14px;
      }

      .el-button span {
        margin-left: 3px;
      }
    }
  }
}
</style>
